<template>
	<view>
		<u-navbar title="信息平台"></u-navbar>
		<view class="">
			<u-swiper :list="list" height="400"></u-swiper>
			<view class="search">
				<u-search placeholder="输入搜索关键词" bg-color="#FFF" v-model="keyword"></u-search>
			</view>
			<view class="dis_f_co top_btn">
				<view class="dis_f_sb_c ">
					<view class="btns dis_f_co_c_c"  v-for="(item,index) in cate">
						<image :src="item.icon" mode=""></image>
						<view>{{item.typename}}</view>
					</view>
				</view>
				<view class="dis_f_sb_c ">
					<view class="btns dis_f_co_c_c">
						<image src="../../static/xx_pt/16122629868232.png" mode=""></image>
						<view>生活服务</view>
					</view>
					<view class="btns dis_f_co_c_c">
						<image src="../../static/xx_pt/15472825283507.png" mode=""></image>
						<view>休闲娱乐</view>
					</view>
					<view class="btns dis_f_co_c_c">
						<image src="../../static/xx_pt/16238155466447.png" mode=""></image>
						<view>房屋交易</view>
					</view>
					<view class="btns dis_f_co_c_c">
						<image src="../../static/xx_pt/16122630186577.png" mode=""></image>
						<view>宠物用品</view>
					</view>
					<view class="btns dis_f_co_c_c">
						<image src="../../static/xx_pt/1547282276946.png" mode=""></image>
						<view>上门维修</view>
					</view>
				</view>
			</view>
			<view class="dis_f_sb_c" style="padding: 20rpx;">
				<view style="width: 50%;padding: 10rpx;">
					<u-button type="warning"  @click="gofabu()"> 发布信息</u-button>
				</view>
				<view style="width: 50%;padding: 10rpx;">
					<u-button type="error">商家入驻</u-button>
				</view>
			</view>
			<!-- 优质商家 -->
			<view class="dis_f_co yz_sj">
				<view class="dis_f_sb_c" style="margin-bottom: 20rpx;">
					<view class="left">优质商家</view>
					<view class="dis_f_l_c right">
						<view style="margin-right: 10rpx;">全部商家</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<scroll-view scroll-x="true" class="scroll-view_H">
					<view class="dis_f_co" v-for="(item,index) in slist" style="display: inline-block;margin-right: 20rpx;">
						<image :src="item.photo" mode=""></image>
						<view>{{item.nickname}}</view>
						<view class="sj_bq ">{{item.typename}}</view>
					</view>
				</scroll-view>
			</view>
			<!-- 信息 -->
			<view class="dis_f_co">
				<u-tabs style="border-bottom: 1rpx solid #eee;" active-color="#FF653B" :list="tab" :is-scroll="false" :current="current" @change="change"></u-tabs>
				<view class="info dis_f box" style="width: 100%;" v-for="(item,index) in lists" @click="jump(item)">
					<image :src="item.user.photo" class="tx"></image>
					<view class="dis_f_co" style="width: 85%;">
						<view class="dis_f_sb_c" style="margin-bottom: 20rpx;">
							<view class="dis_f_l_c top">
								<view class="name">{{item.user.nickname}}</view>
								<view class="ge_ren" v-if="item.is_shop == 0">个人</view>
								<!-- <image src="../../static/xx_pt/icon_com.png" class="icon_com"></image> -->
							</view>
							<u-icon name="close-circle"></u-icon>
						</view>
						<view class="dis_f_l_c" style="font-size: 30rpx;margin-bottom: 10rpx;">
							<view>
								<image src="../../static/xx_pt/top_tab.png" class="top_tab" v-if="item.isbid == 1"></image>
								<span style="color: #007AFF;">#{{item.typename}}#</span>
								{{item.title}}
							</view>
						</view>
						<view class="img_list dis_f_w">
							<image :src="items.picPath" v-for="(items,indexs) in item.pic" @click="previewImg(items.picPath)"></image>
						</view>
						<view class="dis_f_l_b" style="margin-bottom: 10rpx;">
							<u-icon name="map-fill" color="#5b71ab"></u-icon>
							<view style="margin-left: 10rpx;font-size: 22rpx;color: #5b71ab;">{{item.address}}</view>
						</view>
						<view class="dis_f_sb_c info_b">
							<view class="dis_f_l_c">
								<view style="margin-right: 20rpx;">{{item.pubdate}}</view>
								<view>浏览{{item.click}}</view>
							</view>
							<view class="dis_f_l_c" v-if="current == 0">
								<view class="dis_f_l_b" style="margin-right: 20rpx;" v-if="item.islove ==0" @click="love(index,item)">
									<u-icon name="thumb-up" ></u-icon>
									<view style="margin-left: 10rpx;">{{item.love}}</view>
								</view>
								<view class="dis_f_l_b" style="margin-right: 20rpx;" v-else @click="love(index,item)">
									<u-icon color="#fa3534" name="thumb-up-fill"></u-icon>
									<view style="margin-left: 10rpx;color: #FA3534;">{{item.love}}</view>
								</view>
								<view class="dis_f_l_b" style="margin-right: 20rpx;">
									<u-icon name="chat"></u-icon>
									<view style="margin-left: 10rpx;">{{item.pinglunnum}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				],
				lists: [
				],
				keyword: '',
				tab: [{
					name: '全部'
				}, {
					name: '租房'
				}, {
					name: '求职'
				}, {
					name: '商家'
				}],
				current: 0,
				like:1,
				cate:'',
				slist:[],
				page:1,
				count:0
			};
		},
		onShow() {
			this.getindexbanner()
			this.getcate()
			this.getshop()
			this.getlist()
		},
		onReachBottom() {
			this.page  = this.page + 1
			if(this.page <= this.count){
				this.getlist()
			}
			console.log(1111)
		},
		methods: {
			gofabu(){
				uni.navigateTo({
					url:'fb_fl'
				})
			},
			jump(e){
				uni.navigateTo({
					url:'../info/info?cate='+this.current+'&id='+e.id
				})
			},
			love(index,e){
				this.$.ajax(2, 'post', 'love', {
					id:e.id,
					uid: uni.getStorageSync('uid'),
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						if(this.lists[index].islove == 1){
							this.$.ti_shi('取消点赞成功')
							this.lists[index].islove = 0
							this.lists[index].love = this.lists[index].love -1
						}else{
							this.$.ti_shi('点赞成功')
							this.lists[index].islove = 1
							this.lists[index].love = this.lists[index].love +1
						}
					}
				})
			},
			getlist(){
				this.$.ajax(2, 'post', 'geilist', {
					cate:this.current,
					sid:1,
					uid: uni.getStorageSync('uid'),
					page:this.page
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						for (let i in res.list) {
						      this.lists.push(res.list[i]); 
						    }
						 // = res.list
						this.count = res.count
					}
				})
				
			},
			previewImg(logourl) {
			               let _this = this;
			               let imgsArray = [];
			               imgsArray[0] = logourl
			               uni.previewImage({
			                   current: 0,
			                   urls: imgsArray
			               });
			           },
			getshop(){
				this.$.ajax(2, 'post', 'youzhishop', {
					uid: uni.getStorageSync('uid'),
					// page:this.page
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.slist = res.list
					
					}
				})
			},
			getcate(){
				this.$.ajax(2, 'post', 'xinxicate', {
					// uid: uni.getStorageSync('uid'),
					// page:this.page
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.cate = res.list
					
					}
				})
			},
			change(index) {
				this.current = index;
				this.lists = []
				this.page = 1
				this.getlist()
			},
			getindexbanner(){
				this.$.ajax(2, 'post', 'getindexbanner', {
					// uid: uni.getStorageSync('uid'),
					// page:this.page
				}, (res) => {
					// console.log(res)
					if (res.code == 1) {
						this.list = res.list
					
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.info_b{
		font-size: 20rpx;
		color: #999;
	}
	.img_list{
		margin-bottom: 10rpx;
		image{
			width: 180rpx;
			height: 180rpx;
			padding: 5rpx;
		}
	}
	.info{
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		.top_tab{
			width: 60rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
		.ge_ren{
			color: #5e97ff;
			background: rgba(217,230,255,1);
			padding: 0 6rpx;
			font-weight: bold;
		}
		
		.icon_com{
			width: 32rpx;
			height: 32rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: bold;
			color: #111112;
			margin-right: 20rpx;
		}
		.tx{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	.scroll-view_H {
		white-space: nowrap;

		image {
			width: 240rpx;
			height: 240rpx;
			border-radius: 20rpx;
			margin-bottom: 10rpx;
		}

		.sj_bq {
			// padding: 0 6rpx;
			color: #Ff653b;
		}
	}

	.yz_sj {
		padding: 20rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		.left {
			font-size: 32rpx;
		}

		.right {
			color: #999;
		}
	}

	.search {
		padding: 20rpx;
	}

	.top_btn {
		padding: 30rpx 40rpx;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.btns {
			margin-bottom: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 10rpx;
				border-radius: 50%;
			}
		}
	}
</style>
